import React, { Component } from 'react';
import Qiniu from 'react-qiniu';
import {QiniuImgUrl} from '../common/url';
import Lightbox from 'react-image-lightbox';
import Datetime from 'react-datetime';
import moment from 'moment';
import SweetAlert from 'react-bootstrap-sweetalert';

export class SingleInput extends Component{

    // constructor(){
    //     super()
    //     this.state = {

    //     }
    // }

    handleChange(event){
        //const name = event.target.name;
        //this.setState({[name]: event.target.value});
        this.props.backParent(event.target.name,event.target.value);
    }
    
    render(){
        return (
            <div className="form-group">
                <label className="col-sm-2 control-label">
                    {this.props.label}
                    </label>
                <div className="col-sm-6">
                    <input type="text" name={this.props.name} placeholder={this.props.placeholder} className="form-control"  value={this.props.value==null?"":this.props.value} onChange={this.handleChange.bind(this)}/>
                </div>
            </div>
        )
    }
}

export class QiniuMulti extends Component{

    constructor(){
        super();
        this.state = {
            files: [],
            srcs:[],
            indexi:0
        };
    }

    componentWillMount(){
        setTimeout(function(){
            let excha = [];
            if((typeof this.props.src)=="string"){
                excha = this.props.src.split(",")
            }else{
                excha = this.props.src
            }
            if(excha == null){
                excha = [];
            }
            this.setState({
                srcs:excha
            })
        }.bind(this),1000)
        // this.setState({
        //     srcs:this.props.src
        // })
    }

    // componentWillReceiveProps(){
    //     this.setState({
    //         srcs:this.props.src
    //     })
    // }

    onUpload(files) {
        let _this = this;
        // set onprogress function before uploading
        files.map(function (f) {
            //console.log(f)
            f.onprogress = function(e) {
                //console.log(e);
                //return (<SweetAlert />)
                if(e.currentTarget.status==200){
                    _this.props.callbackParent(_this.state.srcs);
                    //setTimeout(function(){
                    _this.refs.uploadani.style.display = "none";
                    //}.bind(this),1500)
                }
                
            };
        });
    }

    onDrop(files) {
        this.refs.uploadani.style.display = "block";
        let slimit = 0;
        // if(this.state.srcs == null){
        //     slimit = this.props.limitNum-0;
        // }else{
        let srcarray = this.state.srcs == ""?[]:this.state.srcs;
        slimit = this.props.limitNum-srcarray;
        //}
        
        let sum = files.length<slimit ? files.length : slimit ;
        //console.log(sum) 
        
        for (let i=0;i<sum;i++){
            //console.log(files[i]);
            const file = files[i].preview.split("/",4);
            const phototype = files[i].name.split(".");
            srcarray.push(file[3]+"."+phototype[phototype.length-1]);
        }
        this.setState({
            srcs:srcarray
        })
        //console.log(srcarray)
        //this.props.callbackParent(srcarray);
    }

    removeImg(event){
        //console.log(this.state.indexi);
        const removeImages = this.state.indexi;
        this.state.srcs.splice(removeImages,1);
        this.props.callbackParent(this.state.srcs);
        this.refs.alertwrap.style.display="none";
    }

    setIndex(event){
        event.stopPropagation();
        let i = event.target.outerHTML;
        //console.log(i.substring(13,14));
        this.refs.alertwrap.style.display="block";
        this.setState({
            indexi:i.substring(13,14)
        })
    }

    render(){
        let allImages = [];
        if(this.props.src){
            for(let i=0;i<this.state.srcs.length;i++){
                let item = this.state.srcs[i];
                allImages.push(
                    <div key={i}>
                        <img src={QiniuImgUrl+item} alt="images" />
                        <span value={i} className="glyphicon glyphicon-remove-sign" onClick={this.setIndex.bind(this)}></span>
                    </div>
                )
            }
        }
        
                //console.log(this.props.label,this.props.token)
        return(
            <div className="form-group">
                <label className="col-sm-2 control-label">
                    {this.props.label}
                </label>
                <div className="col-sm-6">
                    <Qiniu onDrop={this.onDrop.bind(this)} className="qiniu" token={this.props.token} onUpload={this.onUpload.bind(this)}>
                        <div className="img-preview">{this.props.src==null || this.props.src==""?this.props.info:allImages}</div>
                        <div ref="uploadani" className="upload-animate" style={{display:"none"}}>
                            <span className="glyphicon glyphicon-ok-circle"></span>
                            <p>上传成功</p>
                        </div>
                    </Qiniu>
                </div>
                <div ref="alertwrap" id="alertwrap" style={{"display":"none"}}>
                <SweetAlert
                warning
                confirmBtnText="确定"
                confirmBtnBsStyle="primary"
                showCancel
	            cancelBtnBsStyle="default"
                cancelBtnText="取消"
                title="确定删除这张图片吗。"
                onConfirm={this.removeImg.bind(this)}
                onCancel={()=>this.refs.alertwrap.style.display="none"}
                >
                </SweetAlert>
              </div>
            </div>
        )
    }
}

export class RadioInput extends Component{

    constructor(){
        super();
        this.state = {
            selected:false
        };
    }

    componentWillMount(){
        setTimeout(function(){
          this.setState({
            selected:this.props.selected==true
          })  
        }.bind(this),1000)
        
    }

    handleChange(event) {   
        this.setState({selected: event.target.value=="true"});
        this.props.backParent(event.target.name,event.target.value);
        //console.log(this.state)
    }

    render(){
        return(
            <div className="form-group">
                <label className="col-sm-2 control-label">
                    {this.props.label}  
                </label>
                <div className="col-sm-6">
                    <label className="radio-inline">
                        <input type="radio" name={this.props.radioname} value={true} onChange={this.handleChange.bind(this)} checked={this.state.selected==true}/>{this.props.option1}
                    </label>
                    <label className="radio-inline">
                        <input type="radio" name={this.props.radioname} value={false} onChange={this.handleChange.bind(this)} checked={this.state.selected==false}/>{this.props.option2}
                    </label>
                </div>
            </div>
        )
    }
}


export class DateInput extends Component{

    render(){
        return (
            <div className="form-group">
                <label className="col-sm-2 control-label">
                    {this.props.label}
                </label>
                <div className="col-sm-3">
                    <Datetime 
                        value = {this.props.value!=null && this.props.value!=""?moment(this.props.value).format("YYYY-MM-DD"):""}
                        onChange = {(Moment)=>{const time = moment(Moment._d).format("YYYY-MM-DD H:mm");this.props.backParent(time,this.props.name);}}
                        //onBlur = {(date)=>{console.log(date)}}
                        //utc = {true}
                        dateFormat="YYYY-MM-DD"
                        />
                </div>
                <div className="col-sm-2">{this.props.tips}</div>
            </div>
        )
    }
}

export class TimeInput extends Component{

    render(){
        return (
            <div className="form-group">
                <label className="col-sm-2 control-label">
                    {this.props.label}
                </label>
                <div className="col-sm-3">
                    <Datetime 
                        value = {this.props.value!=null && this.props.value!=""?moment(this.props.value).format("YYYY-MM-DD HH:mm"):""}
                        onChange = {(Moment)=>{const time = moment(Moment._d).format("YYYY-MM-DD HH:mm");this.props.backParent(time,this.props.name);}}
                        //onBlur = {(date)=>{console.log(date)}}
                        //utc = {true}
                        dateFormat="YYYY-MM-DD"
                        timeFormat="HH:00"/>
                </div>
                <div className="col-sm-2">{this.props.tips}</div>
            </div>
        )
    }
}